<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>区块</title>
    <link rel="stylesheet" href="./css/base.css" type="text/css">
    <link rel="stylesheet" href="./css/home.css" type="text/css">
    <link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.min.css" type="text/css">
    <style>
        #blocklist thead th{
            background-color:#B8CCE4;
            text-align:center !important;
        }
        #blocklist tbody td{
            white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
        }
        #detail tbody td{
            white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
        }

    </style>
</head>
<body>

    <div unselectable="on" onselectstart="return false;">
        <div class="row" style="margin-top: 2rem">
            <div class="col-md-10"></div>
            <div class="col-md-2">
                <button id="back" type="button" class="btn btn-primary" style="font-size: 2rem !important;">返&nbsp;&nbsp;&nbsp;回</button>
            </div>
        </div>
        <div class="row" style="margin-top: 5rem">
            <div class="col-md-1"></div>
            <div class="col-md-10">
                <table id="blocklist" class="table table-striped table-bordered table-hover" style="table-layout: fixed">
                    <thead style="">
                        <tr>
                            <th style="width: 10%">区块高度</th>
                            <th style="width: 10%">包含交易数</th>
                            <th style="width: 25%">区块数据</th>
                            <th style="width: 25%">上一区块</th>
                            <th style="width: 25%">交易ID</th>
                      </tr>
                    </thead>
                    <tbody>
                        <tr v-for="block in blockList" ondblclick="showDetail(this);" v-bind:data-val="block.txId">
                            <td v-bind:title="block.blockNumber">{{block.blockNumber}}</td>
                            <td v-bind:title="block.numberOfTx">{{block.numberOfTx}}</td>
                            <td v-bind:title="block.blockData">{{block.blockData}}</td>
                            <td v-bind:title="block.preData">{{block.preData}}</td>
                            <td v-bind:title="block.txId">{{block.txId}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 模态框（Modal） -->
        <div class="row">
            <div class="modal fade" id="txDetail" tabindex="-1" role="dialog" aria-labelledby="txDetailLabel" aria-hidden="true" data-backdrop="false">
                <div class="modal-dialog" style="width: 60%;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="txDetailLabel">交易详情</h4>
                        </div>
                        <div class="modal-body">
                            <table class="table table-bordered" id="detail">
                                <tbody>
                                    <tr>
                                        <td style="width: 10%;">交易Id</td>
                                        <td style="width: 90%;">{{transaction.transationsID}}</td>
                                    <tr/>
                                    <tr>
                                        <td>创建者</td>
                                        <td>{{transaction.creator}}</td>
                                    </tr>
                                    <tr>
                                        <td>通道名称</td>
                                        <td>{{transaction.channelName}}</td>
                                    </tr>
                                        <td>时间</td>
                                        <td>{{transaction.timstamp}}</td>
                                    <tr>
                                        <td>类型</td>
                                        <td>{{transaction.type}}</td>
                                    </tr>
                                    <tr>
                                        <td>链码</td>
                                        <td>{{transaction.chainCode}}</td>
                                    </tr>
                                    <tr>
                                        <td>背书</td>
                                        <td>{{transaction.endorser}}</td>
                                    </tr>
                                    <tr>
                                        <td>读数据</td>
                                        <td>{{transaction.reads}}</td>
                                    </tr>
                                    <tr>
                                        <td>写数据</td>
                                        <td>{{transaction.writes}}</td>
                                    </tr>
                                    <tr>
                                        <td>账本信息</td>
                                        <td>{{transaction.content}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
        </div>
    </div>
    <script src="./js/jquery-1.11.3.min.js"></script>
    <script src="./plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/lodash.min.js"></script>
    <script src="./plugins/layer/layer.js"></script>
    <script src="./js/blockinfo.js"></script>
</body>
</html>